<template>
	<!-- 登入页面 -->
	<view id="main" :style="hegH">
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome" @click="data">欢迎回来!</view>
			<view class="Anglesd">
				<view class="wskuaishudr" v-show="indexs">
					<text style="font-size: 40rpx; color: #FFFFFF;">微信快速登入(推荐)</text>
				</view>
				<view class="sjsucdr" @click="show" v-show="indexs">
					<text style="font-size: 40rpx; color: #FFFFFF;">手机注册登入</text>
				</view>
			</view>
			<view class="inpute" v-show="indexse">
				<view class="login">
					<view class="l_con">
						<view>手机号码</view>
						<input maxlength="11" type="number" @input="inputChange" v-model:value="name" placeholder="请输入手机号码" name="phone" />
					</view>
					<view class="l_con">
						<view>密码</view>
						<input maxlength="20" type="password" @input="inputChange" style="height: 80rpx;"
						 v-model:value="pass" name="password" placeholder="8-18位不含特殊字符的数字、字母组合" />
					</view>
				</view>
				<button class="confirm-btn" @click="login">登录</button>
				<view class="forget">忘记密码？</view>
				<view class="register">还没有账号？<text>马上注册</text></view>
			</view>
			
		</view>
		<!-- 直角背景 -->
		<view class="Angle"></view>
		<!-- 圆背景-->
		<view class="circle"></view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				indexs:true,//判断显示隐藏
				indexse:false,//判断显示隐藏输入框
				name:'',
				pass:'',
				text:'',
				hegH:0
			}
		},
		created() {
			this.login()
		},
		onShow() {
			this.heig()
			
		},
		methods:{
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;//input框
				// console.log(e.detail.value)
			},
			show(){
				this.indexs = false;
				this.indexse=true
			},
			tips() {
				uni.showToast({
					title: this.text,
					icon: 'none',
					duration: 2000
				})
			},
			login(){
				if(this.name == '' || this.name < 11){
					this.text = '请输入11位中国手机号'
					this.tips()
				} else if(this.pass == "" || this.pass < 8){
					this.text = '密码至少8位'
					this.tips()
				} else{ 
					let _this = this
					uni.request({
						url:`http://192.168.1.54:8081/m.api`,
						method: 'GET',
						data:{
							"_gp":"user",
							"_mt":"login",
							"phone":this.name,
							"password":this.pass,
							"ip":"1"
						},
						success:function(res){
							// console.log(res)
							if (res.data.errmsg == '成功') {
								try {
									uni.setStorageSync('nickname', res.data.data.nickname)//本地缓存中的指定的 key  
									uni.setStorageSync('avatarUrl', res.data.data.avatarUrl)//需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
									uni.setStorageSync('accessToken', res.data.data.accessToken)
									getApp().globalData.Tokey = res.data.data.accessToken
									uni.getStorageSync('avatarUrl')//本地缓存中的指定的 key
								} catch (e) {
									// error
								}
								uni.showToast({//提示信息
									title: '登录成功',
									success: () => {//登入成功之后就返回上一个页面返回indexymian
										setTimeout(() => {//定时器假如不用定时器的话就一下子就返回的上一个页面了，所以用个定时器设置时间慢慢的返回上一个页面
											uni.navigateBack();//回退
										}, 1000)
									}
								})
							} else {
								_this.text = res.data.errmsg//验证input框
								_this.tips()//再调用刷新
							}
						}
					})
				}
			},
			// 获取设备可用屏幕高度
			heig(){
				uni.getSystemInfo({
					success: (res) => {
						let widt = res.windowWidth / 750;
						let heig = res.windowHeight / widt;
						this.hegH = 'height:' + heig + 'rpx;';
						console.log(this.hegH)
					}
				})
			},
		}
	}
</script>

<style scoped="scoped">
	#main {width: 100%;height: 100vh;display: flex;overflow: hidden;position: relative;}
	 /* 直角背景样式*/
	.Angle {position: absolute;z-index: -5;right: -13vh;top: -20vh;width: 300rpx;height: 300rpx;border: 80rpx solid #B4F3E2;transform: rotate(48deg);}
	/* 圆背景样式*/
	.circle {position: absolute;z-index: -5;left: -20vh;bottom: -19vh;width: 300rpx;height: 300rpx;border: 95rpx solid #D0D1FD;border-radius: 50%;}
	.wrapper {width: 90%;height: 60%;margin: auto;}
	.left-top-sign {font-size: 60px;color: #f8f8f8;position: relative;left: -8px;}
	.welcome {position: relative;left: 25px;top: -45px;font-size: 23px;color: #555;text-shadow: 1px 0px 1px rgb(0 0 0 / 30%);}
	.Anglesd{width: 100%; height: 250rpx;}
	.inpute{width: 100%; height: 800rpx; position: absolute;top: 400rpx; left: 0rpx;}
	.wskuaishudr{width: 100%; height: 100rpx; background-color: red; border-radius: 50rpx;text-align: center;line-height: 90rpx;}
	.sjsucdr{width: 100%; height: 100rpx; background-color: red; margin-top: 40rpx; border-radius: 50rpx;text-align: center;line-height: 90rpx;}
	.login {width: 82%;margin: auto;}
	.login .l_con {background-color: #F8F6FC;border-radius: 6rpx;margin: 20rpx 0;padding: 10rpx;padding-left: 20rpx;}
	.login .l_con view {color: #606266;font-size: 28rpx;}
	.confirm-btn {width: 315px;height: 38px;line-height: 38px;border-radius: 50px;margin-top: 35px;background: #fa436a;color: #fff;font-size: 16px;}
	.forget{text-align: center;padding-top: 30rpx;font-size: 26rpx;color: #007AFF;}
	.register{
		position: absolute;
		top:740rpx;
		/* text-align: center; */
		width: 100%;
		font-size: 26rpx;
		margin-left: 19vh;
		
	}
	.register text{
		color: #007AFF;
	}
</style>
